<template>
  <div
    class="u-button"
    :class="[
      `u-button-${type}`,
      `u-button-${size}`,
      {
        'u-button-disabled': disabled,
        'u-button-loading': loading,
        'u-button--plain': plain,
      },
    ]"
    @click="handleClick"
  >
    <div class="u-button-wrap">
      <u-svg v-if="icon" :icon="icon" class="mr-4" :size="16"></u-svg>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "UButton",
  inheritAttrs: false,
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    plain: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "primary",
    },
    icon: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "normal",
    },
  },
  methods: {
    handleClick() {
      this.$emit("click");
    },
  },
};
</script>
<style lang="scss" scoped>
.u-button {
  --u-btn-text: #fff;
}
.u-button {
  display: inline-block;
  padding: 0 16px;
  height: 32px;
  line-height: 32px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--u-btn-bg);
  color: var(--u-btn-text);
  user-select: none;
  cursor: pointer;

  &-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &--plain {
    background: transparent;
    color: var(--u-primary);
    border: 1px solid var(--u-border);
  }

  &-default {
    background: var(--u-color-fff);
    color: var(--u-color-black);
    border: 1px solid var(--u-color-disabled);
  }

  &--small {
    height: 28px;
    line-height: 28px;
    font-size: 12px;
  }

  &--mini {
    height: 24px;
    width: 44px;
    line-height: 24px;
    font-size: 12px;
  }
  &.u-button-disabled {
    cursor: not-allowed;
    background: #d9d9d9;
    color: #fff;
  }
  &.u-button-loading {
    cursor: not-allowed;
    background: #d9d9d9;
    color: #fff;
  }
}
</style>
